<template>
    <div>
        <van-field
            readonly
            :name="name"
            :required="required"
            v-model="dateStr"
            :label="label"
            :placeholder="placeholder"
            :border="border"
            :rules="selectRule"
            @click="openDatePicker">
        </van-field>

        <van-popup v-model="show" bind:close="onClose" position="bottom">
            <van-datetime-picker
                :type="type"
                :min-date="currMinDate"
                @confirm="onDatePicker"
                @cancel="onClose">
            </van-datetime-picker>
        </van-popup>
    </div>
</template>

<script>
    import { formatDate } from '@/util/util'
    const date_format = 'yyyy-MM-dd'
    const datetime_format = 'yyyy-MM-dd hh:mm:ss'

    export default {
        name: "AppDate",
        props:{
            display:{
                type:String,
                default:'inline-block',
                required:false
            },
            placeholder:{
                type:String,
                default:'请选择时间',
                required:false
            },
            label:{
                type:String,
                default:'',
                required:false
            },
            type:{
              type:String,
              default:'datetime',
              required:false
            },
            minDate:{
                type:Date,
                default:null,
                required:false
            },
            value:{
                type:String,
                required:false
            },
            border:{
                type:Boolean,
                default:false,
                required:false
            },
            fromNow:{
                type:Boolean,
                default:false,
                required:false
            },
            name:{
                type:String,
                default:'',
                required:false
            },
            required:{
                type:Boolean,
                default:false,
                required:false
            }


        },
        data(){
            return {
                show:false,
                dateStr:''

            }
        },
        watch:{
            value:{
                immediate:true,
                handler(val){
                    if(!val){
                        this.dateStr = ''
                    }else{
                        if(this.type==='date'){
                            val = val.substr(0,10)
                        }
                        this.dateStr = val
                    }
                }
            }
        },
        computed:{
          currMinDate(){
              if(!this.minDate){
                  if(this.fromNow === true){
                      return new Date();
                  }else{
                      //如果没传最小值 则取10年前
                      let now = new Date();
                      now.setFullYear(now.getFullYear()-10);
                      return now;
                  }
              }
              return new Date(this.minDate);
          },
            selectRule(){
                if(this.required===true){
                    return [{ required: true, message: `请选择${this.label}`}]
                }else{
                    return [];
                }
            }
        },
        methods:{
            onClose(){
                this.show = false
            },
            onDatePicker(date){
                let backString = ''
                if(this.type === 'datetime'){
                    backString = formatDate(date.getTime(),datetime_format);
                }else{
                    backString = formatDate(date.getTime(),date_format);
                }
                this.dateStr = backString
                this.$emit('change',backString,date)
                this.show = false
            },
            openDatePicker(){
                this.show = true
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        }
    }
</script>

<style scoped>

</style>